<template>
  <div class="detail">
    <!-- 主商品图 -->
    <section class="detail-content">
      <img class="detail-conten-img" :src="require(`@/static/product-detail_${id}.png`)">
      <div class="detail-content-right">
        <h2 class="detail-content-right-title">{{ id == 1 ? "电动自行车智能充电桩" : "大功率智能充电插座" }}</h2>
        <h1 class="detail-content-right-name">{{ id == 1 ? "方大白D3/方小白X3" : "叮小双S1" }}</h1>
        <div class="detail-content-right-des">
          匠心智造，极致专注
          <br />
          设计 > 研发 > 生产全流程打造专业充电产品
        </div>
        <div class="detail-content-right-feature">
          扫码刷卡 ｜ 功率检测 ｜ 4G物联 ｜ {{ id == 1 ? "一体注塑 ｜ 10路支持" : "语音播报 ｜ 支持大功率" }}
        </div>
        <div class="detail-content-right-price">
          ￥
          <span>{{ id == 1 ? 399 : 248 }}</span>
          起
        </div>
        <Consult />
      </div>
    </section>
    <!-- 功能强大，平台稳定 -->
    <section class="detail-function">
      <h2 class="detail-function-title">功能强大，平台稳定</h2>
      <div class="detail-function-icons">
        <div class="detail-function-icons-item" v-for="(val, index) in functionList" :key="index">
          <img :src="require(`@/static/product-detail/product-detail-funtion_${index}${id == 2 && (index == 1 || index == 3) ? 2 : ''}.png`)">
          <div class="detail-function-icons-title">{{ val }}</div>
        </div>
      </div>
    </section>
    <!-- 六重防护，保证安全 -->
    <section class="detail-safe">
      <h2 class="detail-safe-title">六重防护，保证安全</h2>
      <div class="detail-safe-icons">
        <div class="detail-safe-icons-item" v-for="(val, index) in safeList" :key="index">
          <img :src="require(`@/static/product-detail/product-detail-safe_${index}.png`)">
          <div class="detail-safe-icons-title">{{ val.title }}</div>
          <div class="detail-safe-icons-subTitle" v-html="val.subTitle"></div>
        </div>
      </div>
    </section>
    <!-- 购货无忧，售后保障 -->
    <section class="detail-buySale">
      <h2 class="detail-buySale-title">购货无忧，售后保障</h2>
      <div class="detail-buySale-content">
        <div class="detail-buySale-content-item" v-for="(val, index) in buySaleList" :key="index">
          <div class="detail-buySale-content-item-title">{{ val.title }}</div>
          <div class="detail-buySale-content-item-line"></div>
          <div class="detail-buySale-content-item-des">{{ val.des }}</div>
        </div>
      </div>
      <div class="detail-buySale-btn">
        <Consult />
      </div>
    </section>
    <!-- 技术参数 -->
    <section class="detail-technology">
      <h2 class="detail-technology-title">购货无忧，售后保障</h2>
      <div class="detail-technology-content">
        <div class="detail-technology-content-left">
          <div class="detail-technology-content-left-item" v-for="(val, index) in technologyList" :key="index">
            <div class="detail-technology-content-left-item-params">{{ val.params }}</div>
            <div class="detail-technology-content-left-item-title">{{ val.title }}</div>
          </div>
        </div>
        <div class="detail-technology-content-right">
          <img class="detail-technology-content-right-img" :src="require(`@/static/product-detail/product-detail-technology-img_${id}.png`)">
          <div class="detail-technology-content-right-wrap">
            <div class="detail-technology-content-right-wrap-param">
              <div>{{ id == 1 ? 300 : 190 }}mm</div>
              <p>长</p>
            </div>
            <div class="detail-technology-content-right-wrap-line"></div>
            <div class="detail-technology-content-right-wrap-param">
              <div>{{ id == 1 ? 290 : 9 }}mm</div>
              <p>宽</p>
            </div>
            <div class="detail-technology-content-right-wrap-line"></div>
            <div class="detail-technology-content-right-wrap-param">
              <div>{{ id == 1 ? 70 : 120 }}mm</div>
              <p>高</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 品质保证，精益求精 -->
    <section class="detail-quality">
      <img src="@/static/product-detail/product-detail-quality-img.png">
      <div class="detail-quality-rigth">
        <h2 class="detail-quality-rigth-title">品质保证，精益求精</h2>
        <div class="detail-quality-rigth-centent">
          <div class="detail-quality-rigth-item" v-for="(val, index) in qualityList" :key="index">
            <div class="detail-quality-rigth-item-title">{{ val.title }}</div>
            <div class="detail-quality-rigth-item-des">{{ val.des }}</div>
          </div>
        </div>
      </div>
    </section>
    <!-- 规范安装，简单便捷 -->
    <section class="detail-install">
      <div class="detail-install-centent">
        <div class="detail-install-centent-left">
          <h2 class="detail-install-centent-title">规范安装，简单便捷</h2>
          <div class="detail-install-centent-line"></div>
          <h3 class="detail-install-centent-des">一台主机，带10路插座，赠送「安装说明书」，全程为您提供安装指导</h3>
          <img :src="require(`@/static/product-detail/product-detail-install-img_${id}.png`)">
        </div>
        <div class="detail-install-centent-right">
          <div v-for="(val, index) in placeList" :key="index">
            <img :src="require(`@/static/product-detail/product-detail-install_${index}.png`)">
            <span>{{ val }}</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data () {
    return {
      functionList: [],
      safeList: [
        {
          title: '过载保护',
          subTitle: '自动检测充电功率<br/>保护爱车不受损'
        },
        {
          title: '过载保护',
          subTitle: '设备闲时不供电<br/>保证安全'
        },
        {
          title: '断电保护',
          subTitle: '充满自动断电保护<br/>电瓶不受损'
        },
        {
          title: '漏电保护',
          subTitle: '发现异常自动断电<br/>杜绝安全隐患'
        },
        {
          title: '水电雷保护',
          subTitle: '防水安装，实时监测异<br/>常，开启防雷保护'
        },
        {
          title: '盗电防护',
          subTitle: '实时检测充电功率<br/>预防多充盗电行为'
        }
      ],
      buySaleList: [
        {
          title: '质量保障',
          des: '通过CNAS、MA等国标质量检测'
        },
        {
          title: '百万保险',
          des: '中国人民保险承保，消费过检'
        },
        {
          title: '退换货政策',
          des: '7天无理由退货，免除后顾之忧'
        },
        {
          title: '质保政策',
          des: '一年质保，终身免费维修'
        },
        {
          title: '固件升级',
          des: '定期的OTA远程固件升级，享最新功能'
        },
        {
          title: '运营指导',
          des: '专属服务顾问，7×24小时保驾护航'
        }
      ],
      technologyList: [],
      qualityList: [
        {
          title: '源头把控，品质保证',
          des: '对锡膏印刷质量采用3D锡膏测厚仪检测+AOI检测双检测模式，确保源头质量'
        },
        {
          title: '工业一体化生产',
          des: '炉前AOI检测、炉后AOI检测、防静电地板、防静电周转车、防静电装配测试台、全员无尘防静电鞋服并佩戴防静电腕带，严格把控每一个生产环节'
        },
        {
          title: '高精准测试',
          des: 'ICT测试、FCT测试、疲劳测试、恶劣工况测试、老化测试，不放松每一个测试环节。'
        },
        {
          title: '生产与质量标准',
          des: '标准万级无尘车间、高速自动化SMT、DIP生产线、ISO9001质量管理体系认证、ISO4001环境管理体系认证。'
        }
      ],
      placeList: ['小区', '商圈', '学校', '地下室', '城中村改造', '老旧小区'],
      info: {},
      id: this.$route.params.id,
      headTitle: this.$route.params.id == 1 ? '电动自行车充电桩智能扫码/刷卡10路机-叮叮充电桩' : '智能大功率充电桩 双控插座-叮叮充电桩',
      headKeywords: this.$route.params.id == 1 ? '电单车智能扫码/刷卡10路机,多场景安装方案' : '智能大功率充电桩,双控插座,多场景安装方案',
      headDescription: this.$route.params.id == 1 ? '电单车智能扫码/刷卡10路机功能参数，安装方案，可同时为10辆电单车充电，支持4G通讯方式，支持扫码/刷卡两种充电方式，可在用户集中的小区、商圈等地点投放。' : '智能大功率充电桩，双控插座，单插座支持最大功率2200W，可同时为2辆电动车充电，支持扫码、刷卡适用于老旧小区改造和商圈，小巧方便，安装灵活。'
    }
  },
  async asyncData ({$axios}) {
    const res = await $axios.get('/data/test.json').then(res => {
      console.log(res)
      return res
    })
    return {
      detail: res.data
    }
    /* const res = await axios.get('/data/test.json')
    console.log(res)
    return {
      detail: res.data
    } */
  },
  created () {
    this.info = this.detail.filter(val => val.id == this.$route.params.id)[0]
    this.functionList = ['智能物联(2G/4G/WIFI)', this.id == 1 ?  '多项防护' : '支持大功率', '扫码刷卡', this.id == 1 ?  '触摸按键' : '语音播报', '充满自停', '功率检测', '计费灵活', '远程控制']
    this.technologyList = [
        {
          params: 'AV220V/50HZ',
          title: '输入额定电压'
        },
        {
          params: this.id == 1 ? '1200W' : '2000W',
          title: '单路输出功率'
        },
        {
          params: `2G/4G/WIFI`,
          title: '联网方式'
        },
        {
          params: `${this.id == 1 ? '10' : '2' }路独立`,
          title: '充电路数'
        },
        {
          params: '<5W',
          title: '待机功率'
        },
        {
          params: 'IP54',
          title: '防护等级'
        },
        {
          params: '-20℃～55℃',
          title: '环境温度'
        },
        {
          params: '阻燃ABS材料',
          title: '外壳材质'
        }
      ]
  },
  methods: {
  },
  head() {
    return {
      title: this.headTitle,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.headKeywords
        },
        {
          hid: 'description',
          name: 'description',
          content: this.headDescription
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .titleStyle
    width: 100%
    margin: 0 auto
    text-align: center
    margin: 60px auto 0px
    color: #282C32
    font-size: 32px
    font-weight: 400
    line-height: 48px
  .detail
    width: 100%
    height: auto
    .detail-content
      width: 1180px
      margin: 0 auto
      display: flex
      flex-direction: row
      justify-content: space-between
      padding: 100px 0 60px
      .detail-conten-img
        width: 600px
        height: 420px
        margin-right: 100px
      .detail-content-right
        .detail-content-right-title
          font-size: 20px
          line-height: 28px
          color: #F57033
          margin-bottom: 4px
        .detail-content-right-name
          font-size: 48px
          line-height: 68px
          color: #282C32
          margin-bottom: 12px
        .detail-content-right-des
          font-size: 22px
          line-height: 36px
          color: #282C32
          margin-bottom: 12px
        .detail-content-right-feature
          font-size: 16px
          line-height: 22px
          color: rgba(40, 44, 50, 0.7)
          margin-bottom: 48px
        .detail-content-right-price
          font-size: 24px
          line-height: 34px
          color: #282C32
          margin-bottom: 16px
          span
            font-size: 48px
            font-weight: bolder
    .detail-function
      min-width: 1180px
      background: #282C32
      clear: both
      overflow: hidden
      height: 548px
      .detail-function-title
        @extend .titleStyle
        color: #fff
        margin-bottom: 48px
      .detail-function-icons
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 0px
        justify-content: space-around
        .detail-function-icons-item
          flex: 0 0 295px
          text-align: center
          margin-bottom: 48px
          img
            width: 88px
            height: 88px
            margin-bottom: 16px
          .detail-function-icons-title
            color: #fff
            font-size: 20px
            line-height: 28px
    .detail-safe
      min-width: 1180px
      clear: both
      overflow: hidden
      height: 764px
      .detail-safe-title
        @extend .titleStyle
        margin-bottom: 48px
      .detail-safe-icons
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 0px
        justify-content: space-around
        .detail-safe-icons-item
          flex: 0 0 390px
          text-align: center
          margin-bottom: 80px
          img
            width: 96px
            height: 96px
            margin-bottom: 24px
          .detail-safe-icons-title
            color: #282C32
            font-size: 24px
            line-height: 32px
            margin-bottom: 12px
          .detail-safe-icons-subTitle
            color: #888
            font-size: 18px
            line-height: 26px
    .detail-buySale
      min-width: 1180px
      clear: both
      overflow: hidden
      background: #F8F8F8
      height: 668px
      .detail-buySale-title
        @extend .titleStyle
        margin-bottom: 48px
      .detail-buySale-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 0px
        justify-content: space-around
        .detail-buySale-content-item
          width: 380px
          height: 160px
          background: #fff
          border-radius: 8px
          box-shadow: 0px 10px 10px rgba(19, 27, 39, 0.1)
          margin-bottom: 32px
          .detail-buySale-content-item-title
            color: #282C32
            font-size: 24px
            line-height: 32px
            margin: 32px 0 16px 40px
          .detail-buySale-content-item-line
            width: 48px
            height: 5px
            background: #F57033
            margin: 0px 0 16px 40px
          .detail-buySale-content-item-des
            color: rgba(40, 44, 50, 0.7)
            font-size: 18px
            line-height: 26px
            margin-left: 40px
      .detail-buySale-btn
        width: 1180px
        margin: 0 auto
        text-align: center
        margin-top: 20px
    .detail-technology
      min-width: 1180px
      clear: both
      overflow: hidden
      background: url('../../../static/product-detail/product-detail-technology-bg.png') no-repeat
      background-size: cover
      background-position: center
      height: 692px
      .detail-technology-title
        @extend .titleStyle
        color: #fff
        margin-bottom: 48px
      .detail-technology-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        .detail-technology-content-left
          width: 600px
          display: flex
          flex-direction: row
          flex-wrap: wrap
          .detail-technology-content-left-item
            width: 300px
            margin-bottom: 48px
            .detail-technology-content-left-item-params
              color: #fff
              font-size: 28px
              line-height: 40px
              margin-bottom: 6px
            .detail-technology-content-left-item-title
              color: rgba(255, 255, 255, 0.7)
              font-size: 16px
              line-height: 22px
        .detail-technology-content-right
          img
            width: 443px
            height: 380px
            margin-bottom: 40px
          .detail-technology-content-right-wrap
            display: flex
            flex-direction: row
            justify-content: space-around
            width: 400px
            text-align: center
            margin: 0 auto
            .detail-technology-content-right-wrap-param
              div
                color: #fff
                font-size: 20px
                line-height: 28px
                margin-bottom: 6px
              p
                color: #fff
                font-size: 16px
                line-height: 22px
            .detail-technology-content-right-wrap-line
              width: 1px
              height: 40px
              background: rgba(255, 255, 255, 0.2)
              margin-top: 10px
    .detail-quality
      width: 1180px
      clear: both
      overflow: hidden
      margin: 0 auto
      height: 700px
      display: flex
      flex-direction: row
      margin-top: 80px
      img
        width: 580px
        height: 600px
        margin-right: 120px
      .detail-quality-rigth
        width: 480px
        .detail-quality-rigth-title
          @extend .titleStyle
          margin: 0
          margin-bottom: 64px
          text-align: left
        .detail-quality-rigth-centent
          .detail-quality-rigth-item
            width: 454px
            border-left: 10px #F57033 solid
            padding-left: 16px
            margin-bottom: 32px
            .detail-quality-rigth-item-title
              color: #282C32
              font-size: 24px
              line-height: 32px
              margin-bottom: 12px
            .detail-quality-rigth-item-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 24px
    .detail-install
      min-width: 1180px
      clear: both
      overflow: hidden
      background: #F8F8F8
      height: 700px
      .detail-install-centent
        width: 1180px
        margin: 0 auto
        display: flex
        flex-direction: row
        margin-top: 60px
        .detail-install-centent-left
          width: 460px
          margin-right: 120px
          .detail-install-centent-title
            @extend .titleStyle
            margin: 0
            margin-bottom: 64px
            text-align: left
            margin-bottom: 16px
          .detail-install-centent-line
            width: 48px
            height: 5px
            background: #F57033
            margin-bottom: 16px
          .detail-install-centent-des
            color: rgba(40, 44, 50, 0.7)
            font-size: 20px
            line-height: 28px
            margin-bottom: 133px
          img
            width: 480px
            height: 306px
        .detail-install-centent-right
          width: 620px
          display: flex
          flex-direction: row
          flex-wrap: wrap
          justify-content: space-around
          div
            width: 280px
            height: 180px
            margin-bottom: 20px
            position: relative
            img
              width: 280px
              height: 180px
              position: absolute
              top: 0
              left: 0
            span
              position: absolute
              top: 132px
              left: 24px
              color: #fff
              font-size: 24px
              line-height: 32px
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .titleStyle
    width: 100vw
    margin: 0 auto
    text-align: center
    margin: 24px auto 8px
    color: #282C32
    font-size: 28px
    font-weight: bolder
  .detail
    width: 100vw
    height: auto
    .detail-content
      width: 90vw
      margin-left: 5vw
      padding: 50px 0
      .detail-conten-img
        width: 100%
      .detail-content-right
        .detail-content-right-title
          font-size: 20px
          line-height: 28px
          color: #F57033
          margin-bottom: 4px
        .detail-content-right-name
          font-size: 30px
          line-height: 38px
          color: #282C32
          margin-bottom: 8px
        .detail-content-right-des
          font-size: 20px
          line-height: 30px
          color: #282C32
          margin-bottom: 8px
        .detail-content-right-feature
          font-size: 14px
          line-height: 22px
          color: rgba(40, 44, 50, 0.7)
          margin-bottom: 12px
        .detail-content-right-price
          font-size: 20px
          line-height: 34px
          color: #282C32
          margin-bottom: 8px
          span
            font-size: 40px
            font-weight: bolder
    .detail-function
      min-width: 100vw
      background: #282C32
      clear: both
      overflow: hidden
      .detail-function-title
        @extend .titleStyle
        color: #fff
        margin-bottom: 48px
      .detail-function-icons
        margin-left: 5vw
        width: 90vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 0px
        justify-content: space-around
        .detail-function-icons-item
          flex: 0 0 22.5vw
          text-align: center
          margin-bottom: 32px
          img
            width: 14vw
            margin-bottom: 16px
          .detail-function-icons-title
            color: #fff
            font-size: 14px
            line-height: 28px
    .detail-safe
      min-width: 100vw
      clear: both
      overflow: hidden
      .detail-safe-title
        @extend .titleStyle
        margin-bottom: 24px
      .detail-safe-icons
        margin-left: 5vw
        width: 90vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 0px
        justify-content: space-around
        .detail-safe-icons-item
          flex: 0 0 30vw
          text-align: center
          margin-bottom: 40px
          img
            width: 14vw
            margin-bottom: 14px
          .detail-safe-icons-title
            color: #282C32
            font-size: 16px
            line-height: 16px
            margin-bottom: 6px
          .detail-safe-icons-subTitle
            color: #888
            font-size: 10px
            line-height: 14px
    .detail-buySale
      min-width: 100vw
      clear: both
      overflow: hidden
      background: #F8F8F8
      .detail-buySale-title
        @extend .titleStyle
        margin-bottom: 24px
      .detail-buySale-content
        margin-left: 5vw
        width: 90vw
        margin-bottom: 0px
        .detail-buySale-content-item
          width: 90vw
          background: #fff
          border-radius: 8px
          box-shadow: 0px 10px 10px rgba(19, 27, 39, 0.1)
          margin-bottom: 32px
          clear: both
          overflow: hidden
          .detail-buySale-content-item-title
            color: #282C32
            font-size: 22px
            line-height: 26px
            margin: 16px 0 6px 16px
          .detail-buySale-content-item-line
            width: 48px
            height: 3px
            background: #F57033
            margin: 0px 0px 6px 16px
          .detail-buySale-content-item-des
            color: rgba(40, 44, 50, 0.7)
            font-size: 18px
            line-height: 22px
            margin-left: 16px
            margin-bottom: 16px
      .detail-buySale-btn
        width: 100vw
        margin: 0 auto
        text-align: center
        margin-top: 20px
        margin-bottom: 20px
    .detail-technology
      min-width: 100vw
      clear: both
      overflow: hidden
      background: #000
      .detail-technology-title
        @extend .titleStyle
        color: #fff
        margin-bottom: 20px
      .detail-technology-content
        margin: 0 auto
        width: 90vw
        margin-left: 5vw
        .detail-technology-content-left
          width: 90vw
          display: flex
          flex-direction: row
          flex-wrap: wrap
          justify-content: space-around
          .detail-technology-content-left-item
            width: 45vw
            margin-bottom: 24px
            text-align: center
            .detail-technology-content-left-item-params
              color: #fff
              font-size: 22px
              line-height: 26px
              margin-bottom: 4px
            .detail-technology-content-left-item-title
              color: rgba(255, 255, 255, 0.7)
              font-size: 16px
              line-height: 22px
        .detail-technology-content-right
          img
            width: 90vw
            margin-bottom: 20px
          .detail-technology-content-right-wrap
            display: flex
            flex-direction: row
            justify-content: space-around
            width: 90vw
            text-align: center
            .detail-technology-content-right-wrap-param
              div
                color: #fff
                font-size: 18px
                line-height: 22px
                margin-bottom: 2px
              p
                color: #fff
                font-size: 14px
                line-height: 22px
            .detail-technology-content-right-wrap-line
              width: 1px
              height: 32px
              background: rgba(255, 255, 255, 0.2)
              margin-top: 8px
    .detail-quality
      width: 90vw
      clear: both
      overflow: hidden
      margin-left: 5vw
      margin-top: 5vw
      img
        width: 90vw
      .detail-quality-rigth
        width: 90vw
        .detail-quality-rigth-title
          @extend .titleStyle
          margin: 0
          margin: 20px 0
          text-align: left
        .detail-quality-rigth-centent
          .detail-quality-rigth-item
            width: 90vw
            border-left: 6px #F57033 solid
            padding-left: 12px
            margin-bottom: 32px
            .detail-quality-rigth-item-title
              color: #282C32
              font-size: 20px
              line-height: 24px
              margin-bottom: 6px
            .detail-quality-rigth-item-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 20px
    .detail-install
      min-width: 100vw
      clear: both
      overflow: hidden
      background: #F8F8F8
      .detail-install-centent
        width: 90vw
        margin-left: 5vw
        margin-top: 16px
        .detail-install-centent-left
          width: 90vw
          .detail-install-centent-title
            @extend .titleStyle
            margin: 0
            text-align: left
            margin: 10px 0
          .detail-install-centent-line
            width: 48px
            height: 3px
            background: #F57033
            margin-bottom: 16px
          .detail-install-centent-des
            color: rgba(40, 44, 50, 0.7)
            font-size: 20px
            line-height: 26px
            margin-bottom: 20px
          img
            width: 90vw
        .detail-install-centent-right
          width: 90vw
          display: flex
          flex-direction: row
          flex-wrap: wrap
          justify-content: space-around
          height: 100vw
          margin-top: 5vw
          div
            width: 43vw
            margin-bottom: 2vw
            position: relative
            img
              width: 43vw
              position: absolute
              top: 0
              left: 0
            span
              position: absolute
              top: 66px
              left: 10px
              color: #fff
              font-size: 18px
              line-height: 24px
</style>